<template>
  <div>
    <el-form label-width="100px">
      <el-row type="flex" justify="evenly">
        <el-form-item label="企业名称">
          <el-input placeholder="请输入企业名称" />
        </el-form-item>

        <el-form-item label="缴费时间：" prop="time">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:538px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-row>
      <el-row style="padding-left: 30px;">
        <el-button type="primary" @click="visible=true">添加账单</el-button>
      </el-row>
    </el-form>

    <el-table
      style="width: 100%"
      :data="data"
      :loading="loading"
    >
      <el-table-column
        label="序号"
        type="index"
        width="140"
      />
      <el-table-column
        prop="billNumber"
        label="账单编号"
        width="180"
      />
      <el-table-column
        prop="enterpriseName"
        label="企业名称"
      />
      <el-table-column
        prop="buildingName"
        label="租赁楼宇"
      />
      <el-table-column
        prop="propertyFeePrice"
        label="	物业费(元/m²)"
      />
      <el-table-column
        prop="paymentAmount"
        label="账单金额(元)"
      />
      <el-table-column
        prop="createTime"
        label="缴费时间"
      />
      <el-table-column
        prop="demoFlag"
        label="操作"
      >
        <template #default="{row}">
          <el-button type="text" size="small" @click="visibleCheck=true">查看</el-button>
          <el-popconfirm
            title="是否确认退租当前企业？"
            @onConfirm="onDel(row.id)"
          >
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="查看账单" width="500px" :visible="visibleCheck" @close="visibleCheck=false">
      <el-form
        ref="formRef"
        :model="formData"
      >
        <el-form-item label="租户名称：" prop="username">
          <el-span>{{ formData.username }}</el-span>
        </el-form-item>

        <el-form-item label="租赁楼宇:" prop="buildingName">
          <el-span>{{ formData.buildingName }}</el-span>
        </el-form-item>
        <el-form-item label="缴费周期：" prop="time">
          <el-date-picker
            style="width: 100%;"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >{{ formData.time }}</el-date-picker>
        </el-form-item>
        <el-form-item label="支付金额:" prop="paymentAmount">
          <el-span>{{ formData.paymentAmount }}</el-span>
        </el-form-item>
        <el-form-item label="支付方式：" prop="paymentMethod">
          <el-span style="width: 100%;">{{ formData.paymentMethod }}
          </el-span>
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="visibleCheck=false">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-row>
        </el-form-item>

      </el-form>
    </el-dialog>
    <div class="block" style="float:right">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20,50,100]"
        layout="total,prev,pager,next,sizes"
        :total="total"
        :page-size="10"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />

    </div>
    <el-dialog
      :visible="visible"
      title="添加账单"
      width="500px"
      @close="visible=false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="选择租户" prop="username">
          <el-input v-model="formData.username" placeholder="请选择租户" />
        </el-form-item>

        <el-form-item label="租赁楼宇" prop="buildingName">
          <el-input v-model="formData.buildingName" placeholder="请选择租赁楼宇" />
        </el-form-item>
        <el-form-item label="缴费周期：" prop="time">
          <el-date-picker
            v-model="formData.time"
            style="width: 100%;"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="支付金额" prop="paymentAmount">
          <el-input v-model="formData.paymentAmount" placeholder="请输入支付金额" />
        </el-form-item>
        <el-form-item label="支付方式：" prop="paymentMethod">
          <el-select v-model="formData.paymentMethod" placeholder="请选择支付方式" style="width: 100%;">
            <el-option value="Alipay" label="支付宝" />
            <el-option value="WeChat" label="微信" />
            <el-option value="Cash" label="线下" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="visible=false">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addConBillAPI, delConFeeAPI, getConFeeAPI } from '@/api/condoFee'
export default {
  data() {
    return {
      data: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      visible: false,
      visibleCheck: false,
      formData: {
        username: '',
        enterpriseId: '',
        buildingName: '',
        startTime: '',
        endTime: '',
        paymentAmount: '',
        paymentMethod: ''
      },
      rules: {
        username: [{ required: true, message: '请输入租户' }],
        buildingName: [{ required: true, message: '请选择租赁的楼宇' }],
        startTime: [{ required: true, message: '请选择租赁起止日期' }],
        status: [{ message: '请选择租赁起止周期' }],
        time: [{ required: true, message: '请选择缴费日期' }],
        paymentAmount: [{ required: true, message: '请输入支付金额' }],
        paymentMethod: [{ required: true, message: '请选择支付方式' }]
      }

    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    async onDel(id) {
      await delConFeeAPI(id)
      this.$message.success('删除成功')
      if (this.data.list === 1) {
        this.page--
      }
      this.onLoad()
    },
    async onSubmit() {
      await this.$refs.formRef.validate()
      await addConBillAPI()
      this.$message.success('添加成功')
      this.visible = false
      this.onLoad()
    },
    async  onLoad() {
      this.loading = true
      const { data } = await getConFeeAPI({ page: this.page,
        pageSize: this.pageSize })
      this.loading = false
      this.data = data.rows
      this.total = data.total
    },
    onCurrentChange(page) {
      this.page = page
      this.onLoad()
    },
    onSizeChange(page) {
      this.pageSize = page
      this.onLoad()
      this.page = 1
    }
  }
}
</script>

  <style>

  </style>
